<template>
  <div>
    <!-- 执行者 -->
    <el-form-item v-if="initdisplay" label="执行者">
      <el-radio v-model="radio" :label="true" @change="changeAssigneeRadio">用户</el-radio>
      <el-radio v-model="radio" :label="false" @change="changeAssigneeRadio">变量</el-radio>
      <el-input v-if="radio" placeholder="请选择执行者" @focus="handleInitiatorIconClick">
        <el-tag v-for="(tag,index) in initObject.initiator" slot="prefix" :key="index" closable type="success" @close="removeInitiator(tag)">{{ tag }}</el-tag>
      </el-input>
      <el-input v-else v-model="input" placeholder="请输入表示执行者的变量名称" @change="changeInput" />
    </el-form-item>
    <!-- 候选角色 -->
    <el-form-item v-if="initRoleDisplay" label="候选角色" title="如已设置执行者，则当前字段不生效">
      <el-radio v-model="radioCandidateGroups" :label="true" @change="changeCandidateGroupsRadio">角色</el-radio>
      <el-radio v-model="radioCandidateGroups" :label="false" @change="changeCandidateGroupsRadio">变量</el-radio>
      <el-select v-if="radioCandidateGroups" v-model="initObject.candidateStarterGroups" multiple placeholder="请选择角色" @change="changeRole" @visible-change="visibleChange" @remove-tag="emitData">
        <el-option
          v-for="item in availableRoles"
          :key="item.code"
          :label="item.name"
          :value="item.code"
        />
      </el-select>
      <el-input v-else v-model="inputCandidateGroups" placeholder="请输入表示候选角色的变量名称" @change="changeInputGroup" />
    </el-form-item>
    <!-- 候选用户 -->
    <el-form-item label="候选执行者" title="如已设置执行者，则当前字段不生效">
      <el-radio v-model="radioCandidateUsers" :label="true" @change="changeCandidateUsersRadio">用户</el-radio>
      <el-radio v-model="radioCandidateUsers" :label="false" @change="changeCandidateUsersRadio">变量</el-radio>
      <el-input v-if="radioCandidateUsers" placeholder="请选择候选执行者" @focus="handleUserIconClick" />
      <div v-if="initObject.candidateStarterUsers.length > 0 && radioCandidateUsers" class="fix-input-prefix2">
        <el-tag v-for="(tag,index) in initObject.candidateStarterUsers" :key="index" size="mini" closable type="success" @close="removeUser(tag)">{{ tag }}</el-tag>
        <i class="el-icon-close" title="清除所有值" @click="clearAllUser" />
      </div>
      <el-input v-if="!radioCandidateUsers" v-model="inputCandidateUsers" placeholder="请输入表示候选执行者的变量名称" @change="changeInputUser" />
    </el-form-item>
    <SelectDialog title="选择用户" :append-to-body="true" :show="userSelDialogFormVisible" @on-ok="selectUserOk" @on-cancel="selectUserCancel">
      <UsersPage ref="usersTable" :for-selection="true" :multiple-selected="true" />
    </SelectDialog>
    <SelectDialog title="选择用户" :append-to-body="true" :show="initiatorSelDialogFormVisible" @on-ok="selectInitiatorOk" @on-cancel="selectInitiatorCancel">
      <UsersPage ref="initiatorTable" :for-selection="true" :multiple-selected="true" />
    </SelectDialog>
  </div>
</template>
<script>
const Dollar = '$'
const Left_Bracket = '{'
const Right_Bracket = '}'
import { list } from '@neu/auth-ui/api/role'
import UsersPage from '@neu/auth-ui/views/users/tables'
import SelectDialog from '@neu/biz-core/components/SelectDialog'
export default {
  name: 'AuthorityCom',
  components: {
    UsersPage,
    SelectDialog
  },
  props: {
    initdisplay: {
      required: false,
      type: Boolean,
      default: true
    },
    initRoleDisplay: {
      required: false,
      type: Boolean,
      default: true
    },
    initObjectFromParent: {
      required: false,
      type: Object,
      default: () => {
        return {
          candidateStarterGroups: [],
          candidateStarterUsers: [],
          initiator: []
        }
      }
    }
  },
  data() {
    return {
      input: '',
      inputCandidateUsers: '',
      inputCandidateGroups: '',
      radio: true,
      radioCandidateUsers: true,
      radioCandidateGroups: true,
      userSelDialogFormVisible: false,
      initiatorSelDialogFormVisible: false,
      availableRoles: [],
      /** 判断角色数据是否发生变化 */
      roleDataChange: false,
      initObject: JSON.parse(JSON.stringify(this.initObjectFromParent))
    }
  },
  watch: {
    initObjectFromParent: {
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal) {
          if (this.initObject.initiator && this.initObject.initiator.length > 0 && this.initObject.initiator[0].indexOf(Dollar) > -1 && this.initObject.initiator[0].indexOf(Left_Bracket) > -1 && this.initObject.initiator[0].indexOf(Right_Bracket) > -1) {
            this.input = this.initObject.initiator[0].replace(Dollar, '').replace(Left_Bracket, '').replace(Right_Bracket, '')
            this.radio = false
          }
          if (this.initObject.candidateStarterGroups && this.initObject.candidateStarterGroups.length > 0 && this.initObject.candidateStarterGroups[0].indexOf(Dollar) > -1 && this.initObject.candidateStarterGroups[0].indexOf(Left_Bracket) > -1 && this.initObject.candidateStarterGroups[0].indexOf(Right_Bracket) > -1) {
            this.inputCandidateGroups = this.initObject.candidateStarterGroups[0].replace(Dollar, '').replace(Left_Bracket, '').replace(Right_Bracket, '')
            this.radioCandidateGroups = false
          }
          if (this.initObject.candidateStarterUsers && this.initObject.candidateStarterUsers.length > 0 && this.initObject.candidateStarterUsers[0].indexOf(Dollar) > -1 && this.initObject.candidateStarterUsers[0].indexOf(Left_Bracket) > -1 && this.initObject.candidateStarterUsers[0].indexOf(Right_Bracket) > -1) {
            this.inputCandidateUsers = this.initObject.candidateStarterUsers[0].replace(Dollar, '').replace(Left_Bracket, '').replace(Right_Bracket, '')
            this.radioCandidateUsers = false
          }
        }
      }
    }
  },
  created() {
    // 候选角色
    list().then(response => {
      this.availableRoles = response.data
    })
  },
  methods: {
    /** 选择用户按钮 */
    handleUserIconClick() {
      this.userSelDialogFormVisible = true
    },
    selectUserOk() {
      var users = this.$refs.usersTable.selections
      const self = this
      var difference = users.filter(t => {
        return !self.initObject.candidateStarterUsers.includes(t.username)
      })
      // self.initObject.candidateStarterUsers.push(difference.map(t => t.username))
      difference.forEach(t => {
        self.initObject.candidateStarterUsers.push(t.username)
      })
      this.userSelDialogFormVisible = false

      this.emitData()
    },

    selectUserCancel() {
      this.userSelDialogFormVisible = false
    },
    /** 删除某一项 */
    removeUser(tag) {
      this.initObject.candidateStarterUsers.splice(this.initObject.candidateStarterUsers.indexOf(tag), 1)
      this.emitData()
    },
    /** 选择用户按钮 */
    handleInitiatorIconClick() {
      this.initiatorSelDialogFormVisible = true
    },
    selectInitiatorOk() {
      var users = this.$refs.initiatorTable.selections
      if (users.length > 1) {
        return this.$message({
          showClose: true,
          message: '只能选择一个用户',
          type: 'error'
        })
      }
      this.initObject.initiator = []
      this.initObject.initiator.push(users[0].username)
      // const self = this
      // var difference = users.filter(t => {
      //   return !self.initObject.initiator.includes(t.username)
      // })
      // difference.forEach(t => {
      //   self.initObject.initiator.push(t.username)
      // })
      this.initiatorSelDialogFormVisible = false
      this.emitData()
    },
    selectInitiatorCancel() {
      this.initiatorSelDialogFormVisible = false
    },
    /** 删除某一项 */
    removeInitiator(tag) {
      this.initObject.initiator.splice(this.initObject.initiator.indexOf(tag), 1)
      this.emitData()
    },
    changeRole(data) {
      this.roleDataChange = true
      // this.emitData()
    },
    visibleChange(bool) {
      if (bool) {
        this.roleDataChange = false
      } else {
        if (this.roleDataChange) {
          this.emitData()
        }
      }
    },
    emitData() {
      const obj = {
        initiator: this.initObject.initiator,
        users: this.initObject.candidateStarterUsers,
        groups: this.initObject.candidateStarterGroups
      }
      this.$emit('changeAuthority', obj)
    },
    /** 删除所有项 */
    clearAllUser() {
      this.initObject.candidateStarterUsers = []
      this.emitData()
    },
    /** 输入执行者用户变量 */
    changeInput(data) {
      this.initObject.initiator = []
      if (data) {
        const tempData = Dollar + Left_Bracket + data + Right_Bracket
        this.initObject.initiator.push(tempData)
      }

      this.emitData()
    },
    /** 输入候选角色变量 */
    changeInputGroup(data) {
      this.initObject.candidateStarterGroups = []
      if (data) {
        const tempData = Dollar + Left_Bracket + data + Right_Bracket
        this.initObject.candidateStarterGroups.push(tempData)
      }
      this.emitData()
    },
    /** 输入候选用户变量 */
    changeInputUser(data) {
      this.initObject.candidateStarterUsers = []
      if (data) {
        const tempData = Dollar + Left_Bracket + data + Right_Bracket
        this.initObject.candidateStarterUsers.push(tempData)
      }
      this.emitData()
    },
    /** 切换用户radio */
    changeAssigneeRadio(data) {
      this.input = ''
      this.initObject.initiator = []
      this.emitData()
    },
    changeCandidateUsersRadio() {
      this.inputCandidateUsers = ''
      this.initObject.candidateStarterUsers = []
      this.emitData()
    },
    changeCandidateGroupsRadio() {
      this.inputCandidateGroups = ''
      this.initObject.candidateStarterGroups = []
      this.emitData()
    }
  }
}
</script>
